<template>
    <div>
        <div class="echartBox">
            <!-- <Echart :height="'350px'" :width="'100%'" :option="option" /> -->
            <div style="height:350px; width:100%;" id="chinaEcharts"></div>
        </div>
        <div class="tableBox">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" highlight-current-row :isShowPage="false" :current="false" max-height="660px" />
        </div>
    </div>
</template>


<script>
import * as echarts from "echarts";
let china = require('./json/china.json');
export default {
    name: 'xxqyrlt',
    props: {
        rowData: {
            type: Array, default: function () {
                return []
            }
        },


    },
    data() {
        return {
            loading: false,
            sfArr: [{ name: '江苏省', xsje: 0, value: 0 },
            { name: '安徽省', xsje: 0, value: 0 }, { name: '湖北省', value: 0 },
            { name: '湖南省', xsje: 0, value: 0 }, { name: '广东省', xsje: 0, value: 0 },
            { name: '浙江省', xsje: 0, value: 0 }, { name: '福建省', xsje: 0, value: 0 },
            { name: '山东省', xsje: 0, value: 0 }, { name: '河南省', xsje: 0, value: 0 },
            { name: '四川省', xsje: 0, value: 0 }, { name: '河北省', xsje: 0, value: 0 },
            { name: '江西省', xsje: 0, value: 0 }, { name: '黑龙江省', xsje: 0, value: 0 },
            { name: '陕西省', xsje: 0, value: 0 }, { name: '贵州省', xsje: 0, value: 0 },
            { name: '吉林省', xsje: 0, value: 0 }, { name: '广西壮族自治区', xsje: 0, value: 0 },
            { name: '山西省', xsje: 0, value: 0 }, { name: '云南省', xsje: 0, value: 0 },
            { name: '辽宁省', xsje: 0, value: 0 }, { name: '甘肃省', xsje: 0, value: 0 },
            { name: '重庆市', xsje: 0, value: 0 }, { name: '内蒙古自治区', xsje: 0, value: 0 },
            { name: '海南省', xsje: 0, value: 0 }, { name: '天津市', xsje: 0, value: 0 },
            { name: '新疆维吾尔自治区', xsje: 0, value: 0 }, { name: '上海市', xsje: 0, value: 0 },
            { name: '宁夏回族自治区', xsje: 0, value: 0 }, { name: '青海省', xsje: 0, value: 0 },
            { name: '北京市', xsje: 0, value: 0 }, { name: '西藏自治区', xsje: 0, value: 0 },
            { name: '台湾省', xsje: 0, value: 0 }, { name: '南海诸岛', xsje: 0, value: 0 }],


            tableDatas: [],

            option: [],
            options: {
                title: {

                },
                tooltip: {
                    trigger: 'item',
                    formatter: '省份：{b}<br/>数值：{c}'
                },

                dataRange: {
                    min: 0,
                    max: Math.max.apply(null, this.data_value_list),
                    x: 'right',
                    y: 'bottom',
                    text: ['高', '低'],           // 文本，默认为数值文本
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        name: '数据',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        itemStyle: {
                            normal: { label: { show: true } },
                            emphasis: { label: { show: true } }
                        },
                        data: this.tableDatas
                    }
                ]
            },


            tableColumns: [
                {
                    label: '省份',
                    prop: 'name',
                    align: 'center',

                },
                {
                    label: '供应商数量',
                    prop: 'value',
                    align: 'center',

                },
                {
                    label: '销售金额(元)',
                    prop: 'xsje',
                    align: 'center',

                }
            ],

        }
    },
    mounted() {
        // echarts.registerMap("china", { geoJSON: chinaMap });
        // this.$nextTick(() => {
        //     // 热力图
        //     this.getProvince_count();
        // });

    },
    watch: {
        rowData: {
            handler(newVal, oldVal) {
                this.getProvince_count(newVal);
                // this.tableDatas = newVal.tableData
                console.log('user对象发生了变化', newVal, oldVal);
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        getProvince_count(newVal) {
            this.tableDatas = []
            for (let i = 0; i < newVal.length; i++) {
                for (let j = 0; j < this.sfArr.length; j++) {
                    if (newVal[i].name == this.sfArr[j].name) {
                        this.tableDatas.push(newVal[i])
                    }
                }
            }
            let Data = {
                rows: this.tableDatas
            };
            let numArr = []
            this.tableDatas.forEach(item => {
                numArr.push(item.value)
            });
            let maxNum = Math.max.apply(null, numArr)

            if (newVal.length > 0) {
                this.chinaEcharts(Data.rows, maxNum);
            }

        },
        //    热力图
        chinaEcharts(dataList, maxNum) {


            let newPromise = new Promise((resolve) => {
                resolve()
            })
            newPromise.then(() => {
                let this_ = this;
                echarts.registerMap('china', china);
                let myChart = echarts.init(document.getElementById("chinaEcharts"));




                let option = {

                    tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        transitionDuration: 0.2
                    },
                    visualMap: {
                        left: 'right',
                        min: 0,
                        max: maxNum,
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        },
                        text: ['高', '低'],
                        calculable: true
                    },

                    series: [
                        {
                            name: '省份',
                            type: 'map',
                            roam: true,
                            map: 'china',
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            data: dataList
                        }
                    ]
                };
                myChart.setOption(option);







                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            })

            //点击前解绑，防止点击事件触发多次
            // myChart.off('click');
            // myChart.on('click', (param) => {
            //     console.log(param, "++++++++++++++1")
            //     // if (param.data) {
            //     //有数据的区域板块(flag标志位告诉父组件是否需要查询接口)
            //     this.$emit('getMapData', { ...param.data, flag: true })
            //     // } else {
            //     //   //无数据板块
            //     //   this.$emit('getMapData', { flag: false })
            //     // }
            // });
        },

    },
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-bottom: 15px;
    border: 1px solid rgb(221, 221, 221);
    background: #f5f5f5;
}
</style>